<template>
  <div class="account-page">
    <ResponsiveNav />

    <!-- 修改路由出口的条件渲染 -->
    <router-view v-slot="{ Component }">
      <template v-if="!Component">
        <!-- 原来的账户页面内容 -->
        <div class="main-content">
          <h1 class="page-title">{{ $t('我的账户') }}</h1>

          <div class="card-grid">
            <!-- 我的资料 -->
            <div class="account-card" @click="handleProfileClick">
              <div class="card-content">
                <img :src="accountIcon" alt="" class="card-icon" />
                <div class="card-info">
                  <h3>{{ $t('我的资料') }}</h3>
                  <p>{{ $t('编辑登录、联系方式等账户信息') }}</p>
                </div>
              </div>
            </div>

            <!-- 登录和安全 -->
            <div class="account-card" @click="handleSecurityClick">
              <div class="card-content">
                <img :src="securityIcon" alt="" class="card-icon" />
                <div class="card-info">
                  <h3>{{ $t('登录和安全') }}</h3>
                  <p>{{ $t('管理密码、双重认证等安全设置') }}</p>
                </div>
              </div>
            </div>

            <!-- 我的资产 -->
            <div class="account-card" @click="handleAssetsClick">
              <div class="card-content">
                <img :src="paymentIcon" alt="" class="card-icon" />
                <div class="card-info">
                  <h3>{{ $t('我的资产') }}</h3>
                  <p>{{ $t('管理您的余额和交易记录') }}</p>
                </div>
              </div>
            </div>

            <!-- 我的订单 -->
            <div class="account-card" @click="handleOrdersClick">
              <div class="card-content">
                <img :src="orderIcon" alt="" class="card-icon" />
                <div class="card-info">
                  <h3>{{ $t('我的订单') }}</h3>
                  <p>{{ $t('查看订单历史和跟踪订单状态') }}</p>
                </div>
              </div>
            </div>

            <!-- 收货地址 -->
            <div class="account-card" @click="handleAddressClick">
              <div class="card-content">
                <img :src="addressIcon" alt="" class="card-icon" />
                <div class="card-info">
                  <h3>{{ $t('收货地址') }}</h3>
                  <p>{{ $t('管理您的收货地址') }}</p>
                </div>
              </div>
            </div>

            <!-- 钱包地址 -->
            <div class="account-card" @click="handleWalletAddressClick">
              <div class="card-content">
                <img :src="walletAddressIcon" alt="" class="card-icon" />
                <div class="card-info">
                  <h3>{{ $t('钱包地址') }}</h3>
                  <p>{{ $t('管理您的加密货币钱包地址') }}</p>
                </div>
              </div>
            </div>

            <!-- 银行卡 -->
            <div class="account-card" @click="handleBankClick">
              <div class="card-content">
                <img :src="bankIcon" alt="" class="card-icon" />
                <div class="card-info">
                  <h3>{{ $t('银行卡') }}</h3>
                  <p>{{ $t('管理您的银行卡信息') }}</p>
                </div>
              </div>
            </div>

            <!-- 我的消息 -->
            <div class="account-card" @click="handleMessagesClick">
              <div class="card-content">
                <img :src="messagesIcon" alt="" class="card-icon" />
                <div class="card-info">
                  <h3>{{ $t('我的消息') }}</h3>
                  <p>{{ $t('查看账户相关的消息和通知') }}</p>
                </div>
              </div>
            </div>

            <!-- 客户服务 -->
            <div class="account-card" @click="handleCustomerServiceClick">
              <div class="card-content">
                <img :src="customerServiceIcon" alt="" class="card-icon" />
                <div class="card-info">
                  <h3>{{ $t('客户服务') }}</h3>
                  <p>{{ $t('获取帮助和客户支持') }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="bottom-wrapper">
          <div class="divider"></div>
          <ProductCarousel />
          <div class="divider"></div>
          <PersonalizedRecommendation />
          <Footer />
        </div>
      </template>

      <component :is="Component" v-else />
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ResponsiveNav from '@/components/ResponsiveNav.vue'
import Footer from '@/components/Footer.vue'
import PersonalizedRecommendation from '@/components/PersonalizedRecommendation.vue'
import ProductCarousel from '@/components/ProductCarousel.vue'

// 导入图标
import accountIcon from '@/assets/images/account/account.png'
import securityIcon from '@/assets/images/account/security.png'
import paymentIcon from '@/assets/images/account/payment.png'
import orderIcon from '@/assets/images/account/order.png'
import messagesIcon from '@/assets/images/account/messages.jpg'
import addressIcon from '@/assets/images/account/fshub_address_book.png'
import customerServiceIcon from '@/assets/images/account/contact_us.png'
import walletAddressIcon from '@/assets/images/account/wallet_address.png'
import bankIcon from '@/assets/images/account/bank.png'

// 推荐商品数据
const recommendProducts = ref([
  {
    id: 1,
    name: 'Scott ComfortPlus 厕纸 12 卷双倍卷数 21.9米',
    price: 56.99,
    image: '/images/products/scott.jpg',
    rating: 4.5,
    reviewCount: 1234
  },
  {
    id: 2,
    name: 'Angel Soft 厕纸 24 卷超大卷 144 卷普通卷数',
    price: 44.99,
    image: '/images/products/angel.jpg',
    rating: 4.7,
    reviewCount: 2156
  },
  // ... 更多商品数据
])

const router = useRouter()

const handleLogin = () => {
  router.push('/login')
}

const handleProfileClick = () => {
  router.push('/account/profile')
}

const handleSecurityClick = () => {
  router.push('/account/security')
}

const handleAssetsClick = () => {
  router.push({
    path: '/assets',
    query: { from: 'account' }
  })
}

const handleMessagesClick = () => {
  router.push('/account/messages')
}

const handleOrdersClick = () => {
  router.push('/account/orders')
}

const handleAddressClick = () => {
  router.push('/account/address')
}

const handleWalletAddressClick = () => {
  router.push({
    path: '/assets/wallet-address',
    query: { from: 'account' }
  })
}

const handleBankClick = () => {
  router.push('/account/bank')
}

const handleCustomerServiceClick = () => {
  router.push('/account/customer-service')
}
</script>

<style lang="scss" scoped>
.account-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: white;

  .main-content {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
  }

  .page-title {
    font-size: 28px;
    color: #232f3e;
    margin-bottom: 20px;
    font-weight: bold;
    padding: 0 8px;
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 8px;
  }

  .account-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background-color: #f8f8f8;
      border-color: #888;
    }

    .card-content {
      display: flex;
      align-items: center;
      padding: 20px;
      height: 100%;

      .card-icon {
        width: 48px;
        height: 48px;
        object-fit: contain;
        margin-right: 16px;
        opacity: 0.8;
      }

      .card-info {
        flex: 1;

        h3 {
          font-size: 17px;
          color: #232f3e;
          margin-bottom: 8px;
          font-weight: 400;
        }

        p {
          font-size: 14px;
          color: #666;
          line-height: 1.4;
          margin: 0;
        }
      }
    }
  }

  .bottom-wrapper {
    width: 100%;
    background-color: #fff;
    margin-top: auto;

    .divider {
      height: 1px;
      background-color: #ddd;
      max-width: 100%;
      margin: 0 auto;
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .account-page {
    .card-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 768px) {
  .account-page {
    .main-content {
      padding: 20px 12px;
    }

    .page-title {
      font-size: 24px;
      margin-bottom: 16px;
    }

    .card-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
}
</style>
